define([
  'jquery',
  'underscore',
  'backbone',
  'lightboxme',
  'https://www.google.com/jsapi',
  'models/charts/DoctorEarningChartModel',
  'text!templates/charts/doctorChartTemplate.html'
], function($, _, Backbone,LightBoxMe,googlecharts,DoctorEarningChartModel ,chartTemplate){

  var DoctorChartsView = Backbone.View.extend({
    el: $(".mainpanel"),
    events: {} ,
    model: new DoctorEarningChartModel(),
    render: function(){
    	// google.load('visualization', '1', {packages: ['corechart']});
    	 var me = this;
     	  var compiledTemplate = _.template( chartTemplate, null);
	      this.$el.html(compiledTemplate);
	      google.load('visualization', '1',  {'callback':this.drawVisualization,
	            'packages':['corechart','table']});
   
	
    },
    drawVisualization: function(){
        var lOptions = {};
        var self=this;     
       
        lOptions.success = function(){
    	      var earnings = self.model.get("earnings");
    	      var chartData=[];
    	      var eachRow =[];
    	      var header = ['Month', 'Earnings'];
    	      chartData.push(header);
    	      for(var i=0 in earnings){
    	    	  eachRow = [earnings[i].month+','+earnings[i].year, earnings[i].amount];
    	    	  chartData.push(eachRow);
    	      }
    	      var data = google.visualization.arrayToDataTable(chartData);
              // Create and draw the visualization.
    	      
              var chart = new google.visualization.BarChart(document.getElementById('visualization'));
             
              chart.
                  draw(data,
                       {title:"Current years earnings",
                        width:800, height:600,
                        vAxis: {title: "Year"},
                        hAxis: {title: "Earnings"}}
                  );
            //  chart.setSelection([]);
              google.visualization.events.addListener(chart, 'click', function(e){
                  var data = chart.getSelection();
                  if(data.length > 0) {
                	  var rowData = self.model.get("earnings");
                	  console.log(rowData);
                	  var row = chart.getSelection()[0].row;
                	  var month=0,foundMonth=-1;
 /*               	  for(var i = 0 in rowData){
                		  if(rowData[i].amount){
                			  console.log(month);
                			  month=month+1;
                			  if(month==row){
                				  console.log(rowData[i]);
                				  foundMonth=i;
                				  break;
                			  }
                		  }
                	  }*/
                	  rowData[row].amount?foundMonth=row:foundMonth=-1;
                	  console.log(foundMonth);
/*                	  console.log(foundMonth);
                	  monthString=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
                	  console.log(monthString[foundMonth]);
*/                	  if(foundMonth> -1){
                		  foundMonth=parseInt(foundMonth)+1;
                		  $.ajax({
              	 	        type: "GET",
              	 	        url: "/getMonthEarnings/"+foundMonth,
              	 	        success: function(response){
              	 	        	var data = new google.visualization.DataTable();
              	 	        	data.addColumn('string', 'ClientId');
	              	 	         data.addColumn('string', 'Name');
	              	 	         data.addColumn('date', 'Date Of Appointment');
	              	 	         data.addColumn('number', 'Amount');
	              	 	        // data.addRows(response.length);
	              	 	         var array1=[];
	              	 	         var rows=[];
	              	 	         for(var i =0 in response){
	              	 	        	 console.log(i);
	              	 	        	 rows=[response[i].patient.clientId,response[i].patient.name,new Date(response[i].dateOfAppointment),response[i].amountPaid]
	              	 	        	 array1.push(rows);
	              	 	        	 rows=[];
	              	 	         }
	              	 	         console.log(array1);
	              	 	         data.addRows(array1);
	              	 	         var options = {};
		              	 	      options['page'] = 'enable';
		              	 	      options['pageSize'] = 10;
		              	 	      options['pagingSymbols'] = {prev: 'prev', next: 'next'};
		              	 	      options['pagingButtonsConfiguration'] = 'auto';
	              	 	         var table = new google.visualization.Table(document.getElementById('visualization'));
	              	 	         table.draw(data,options);
              	 	        }
              	 	    });
/*                		  console.log(foundMonth);
                		  console.log(monthString[foundMonth]);
*/                		 
                	  }
       /*         	  console.log(monthString[foundMonth]);
                      chart.setSelection([]);*/
                  }
              });

        };
        this.model=new DoctorEarningChartModel();
        this.model.fetch(lOptions);


    }
  });

  return DoctorChartsView;
});
